// ConfirmDialogPlugin.ts
import {createApp, defineComponent, h, ref, reactive, type App} from 'vue'

let globalConfirm: (
    message: string,
    options?: Partial<{ title: string; trueText: string; falseText: string; text: string }>
) => Promise<boolean>
export const useGlobalConfirm = () => globalConfirm

const ConfirmDialog = defineComponent({
    props: {
        onConfirm: Function
    },
    setup(props, {expose}) {
        const isVisible = ref(false)
        const state = reactive({
            message: '',
            options: {title: '确认操作', trueText: '确认', falseText: '取消', text: ''}
        })
        let resolvePromise: ((value: boolean) => void) | null = null

        const confirm = () => {
            if (resolvePromise) resolvePromise(true)
            if (props.onConfirm) props.onConfirm(true)
            close()
        }
        const cancel = () => {
            if (resolvePromise) resolvePromise(false)
            if (props.onConfirm) props.onConfirm(false)
            close()
        }
        const close = () => {
            isVisible.value = false
        }

        const show = (message: string, options?: Partial<typeof state.options>) => {
            state.message = message
            state.options = {...state.options, ...options}
            isVisible.value = true
            return new Promise<boolean>((resolve) => {
                resolvePromise = resolve
            })
        }

        expose({show})

        return () => isVisible.value
            ? h('teleport', {to: 'body'}, [
                h('div', {class: 'modal-overlay'}, [
                    h('div', {class: 'modal'}, [
                        h('h3', state.options.title),
                        h('p', state.message),
                        state.options.text ? h('div', {class: 'modal-text-content'}, [
                            h('p', {style: {whiteSpace: 'pre-line'}}, state.options.text)
                        ]) : null,
                        h('div', {class: 'modal-actions'}, [
                            h('button', {
                                class: 'modal-button confirm',
                                onClick: confirm
                            }, state.options.trueText),
                            h('button', {
                                class: 'modal-button cancel',
                                onClick: cancel
                            }, state.options.falseText)
                        ])
                    ])
                ])
            ]) : null
    }
})

/* 大致预览
<template>
  <teleport to="body">
    <div v-if="isVisible" class="modal-overlay">
      <div class="modal">
        <h3>{{ state.options.title }}</h3>
        <p style="white-space: pre-line;">{{ state.message }}</p>

        <!-- 可选的额外文本 -->
        <p v-if="state.options.text" style="white-space: pre-line;">
          {{ state.options.text }}
        </p>

        <div class="modal-actions">
          <button @click="confirm">
            {{ state.options.trueText }}
          </button>
          <button @click="cancel">
            {{ state.options.falseText }}
          </button>
        </div>
      </div>
    </div>
  </teleport>
</template>
 */
export default {
    install(app: App) {
        injectStyles()

        // 全局 $confirm 方法，每次调用都会新建一个 ConfirmDialog 实例
        const confirm = (message: string, options?: Partial<{
            title: string;
            trueText: string;
            falseText: string;
            text: string
        }>): Promise<boolean> => {
            return new Promise<boolean>((resolve) => {
                // 创建容器节点
                const div = document.createElement('div')
                document.body.appendChild(div)

                const confirmApp = createApp(ConfirmDialog, {
                    onConfirm: (val: boolean) => {
                        resolve(val)
                        confirmApp.unmount()
                        div.remove()
                    }
                })

                // 传递 message 和 options
                const instance = confirmApp.mount(div) as any
                instance.show(message, options)
            })
        }

        globalConfirm = confirm
        app.config.globalProperties.$confirm = confirm
    }
}

function injectStyles() {
    const style = document.createElement('style')
    style.innerHTML = `
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        font-family: Arial, sans-serif;
    }
    .modal {
        background-color: #fff;
        padding: 40px;
        max-width: 400px;
        width: 90%;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        text-align: center;
    }
    .modal h3 {
        margin-bottom: 20px;
        color: #333;
        font-size: 20px;
        font-weight: 600;
    }
    .modal p {
        color: #555;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 15px;
        text-align: left;
        white-space: pre-line;
    }
    .modal-actions {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        gap: 15px;
    }
    .modal-button {
        display: inline-block;
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        min-width: 80px;
    }
    .modal-button.confirm {
        background-color: #0077cc;
        color: #fff;
    }
    .modal-button.confirm:hover {
        background-color: #005fa3;
    }
    .modal-button.cancel {
        background-color: #f0f0f0;
        color: #333;
        border: 1px solid #ddd;
    }
    .modal-button.cancel:hover {
        background-color: #e0e0e0;
    }
    .modal-text-content {
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 6px;
        margin: 15px 0;
        text-align: left;
    }
    .modal-text-content p {
        margin: 0;
        color: #555;
    }
    `;
    document.head.appendChild(style);
}
